<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>
<body  style="-webkit-backface-visibility: hidden;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend>修改菜单</legend>
</fieldset>
<form class="layui-form"  lay-filter="example">
	<div class="layui-form-item">
		<label class="layui-form-label">上级菜单</label>
		<div class="layui-input-inline">
			<select name="parentId" id ="parentId" lay-filter="parentSelect" >
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">名称</label>
		<div class="layui-input-block">
			<input type="text" name="label" lay-verify="required" autocomplete="off" placeholder=""  class="layui-input" th:value="${resource.label}">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">样式</label>
		<div class="layui-input-block">
			<input type="text"   name="css" id="css" value="layui-icon-face-smile-fine" lay-filter="css" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">链接</label>
		<div class="layui-input-block">
			<input type="text" name="uri" autocomplete="off"  placeholder=""  class="layui-input" th:value="${resource.uri}">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">菜单类型</label>
		<div class="layui-input-inline">
			<select name="type" th:if="${resource.type!=null&&resource.type=='1'}" lay-filter="btnType">
				<option value="1" >菜单</option>
				<option value="2">按钮</option>
			</select>
			<select name="type" th:if="${resource.type!=null&&resource.type=='2'}" lay-filter="btnType">
				<option value="2">按钮</option>
				<option value="1" >菜单</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item"  id="btnPermissionDiv" th:if="${resource.type!=null&&resource.type=='2'}">
		<label class="layui-form-label">按钮权限</label>
		<div class="layui-input-block">
			<input type="text" name="btnPermission" id="btnPermission" autocomplete="off" placeholder=""  class="layui-input" th:value="${resource.btnPermission}">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">排序</label>
		<div class="layui-input-block">
			<input type="text" name="priority"  autocomplete="off" placeholder=""  class="layui-input" th:value="${resource.priority}" oninput="value=value.replace(/[^\d]/g,'')">
		</div>
	</div>
	<div class="layui-form-item" style="display: none">
		<label class="layui-form-label">是否有效</label>
		<div class="layui-input-inline">
			<select name="enabled" th:if="${resource.enabled!=null&&resource.enabled}">
				<option value="true" >是</option>
				<option value="false">否</option>
			</select>
			<select name="enabled" th:if="${resource.enabled!=null&&!resource.enabled}">
				<option value="false">否</option>
				<option value="true" >是</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block" style="text-align: center">
			<button type="button" class="layui-btn layui-btn-normal" id ="back">返回</button>
			<button   class="layui-btn" lay-submit lay-filter="save">保存</button>
		</div>
	</div>
</form>
<script th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:src="@{/js/utils.js}"></script>
<script th:inline="javascript">
    var id = [[${id}]];
    var parentId = [[${resource.parentId}]];
    var css = [[${resource.css}]];
</script>
<script type="text/javascript">
    var layer;
    layui.config({
        base: path+'/js/public/iconPicker/'
    }).extend({
        iconPicker: 'iconPicker'
    });
    layui.use(['layer','form','iconPicker'], function(){
        layer = parent.layer === undefined ? layui.layer : parent.layer;
        var form = layui.form;
        var iconPicker = layui.iconPicker;

        var initParentMenuSelect = function(){
            $.ajax({
                type : 'post',
                url : path+'/resource/parents',
                async : false,
                success : function(data) {
                    var select = $("#parentId");
                    select.append("<option value='0'>root</option>");
                    for(var i=0; i<data.length; i++){
                        var d = data[i];
                        var id = d['id'];
                        var name = d['label'];
                        if(parentId==id) {
                            select.append("<option selected = 'selected' value='" + id + "'>" + name + "</option>");
                        }else{
                            select.append("<option  value='" + id + "'>" + name + "</option>");
						}
                    }
                    console.log(select.html());
                    form.render('select');
                }
            });
        };
        initParentMenuSelect();
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#css',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function(d) {
                console.log(d);
                // $('#css').val('iconpicker');
                iconPicker.checkIcon('css', css);
                $('#css').val(css);
            }
        });



        /**
         *
         *监听提交
         * */
        form.on('submit(save)', function(data){

            var mydata = data.field;

            if(mydata.type==2&&mydata.btnPermission==""){
                layer.msg("请填写按钮权限",{icon: 5})
                return false;
            }
            var load = layer.load();
            mydata.id = id;
            $.ajax({
                type: "POST",
                url:  path+'/resource/update',
                dataType:"json",
                data:mydata,
                success : function(data) {
                    layer.close(load);
                    if(data.code=="1"){
                        console.log(window.parent.hasSave);
                        layer.msg(data.msg,{icon: 6})
                        window.parent.hasSave=true;
                        console.log(window.parent.hasSave);
                        var index=layer.getFrameIndex(window.name); //获取当前窗口的name
                        layer.close(index);
                    }else{
                        layer.msg(data.msg,{icon: 5})
                    }
                }
            });
            return false;
        });

        form.on('select(btnType)', function(data){
            var value = data.value;
            if(value==2){//显示菜单权限，
                $("#btnPermissionDiv").show();

            }else{//否则隐藏
                $("#btnPermission").val("");
                $("#btnPermissionDiv").hide();
            }
        });

    });


    $("#back").click(function () {
        var index=layer.getFrameIndex(window.name); //获取当前窗口的name
        console.log(index)
        layer.close(index);
    })





</script>
</body>
</html>